<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { ElMessage } from "element-plus";
import {
  getPermissionsById,
  getApplicationNameList,
  savePermissions
} from "@/api/empower";
import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";
import TreeList from "@/components/TreeList.vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
let formRef = ref(null);
let formChild = ref({
  id: "",
  parentCode: "",
  taskCode: "",
  taskCname: "",
  systemCode: "",
  systemName: "",
  menuId: "",
  menuName: "",
  remark: "",
  powerType: "",
  childSysTasks: [],
  taskEname: "",
  createCode: "0000107",
  createName: "王曼霞",
  updateCode: null,
  updateName: null,
  validStatus: "1",
  enableFlag: null
});
let treeInfoRef = ref(null);
let formChildRef = ref(null);
let roleOptions = ref([]);
let loading = ref(false);
let formVisible = ref(false);
let formTitle = ref("新增");
let title = "";
let form = ref({
  taskCname: "",
  taskCode: "PNC_Check",
  systemCode: "",
  systemName: "",
  menuId: "1,2",
  menuName: "查勘,查勘查询",
  powerType: "",
  id: "",
  remark: "",
  childSysTasks: [],
  parentCode: "",
  taskEname: "",
  createCode: "0000107",
  createName: "王曼霞",
  updateCode: null,
  updateName: null,
  validStatus: "1",
  enableFlag: null
});
const roleOptions2 = [
  { label: "基础权限", value: "L1" },
  { label: "普通权限", value: "L2" },
  { label: "重要权限", value: "L3" },
  { label: "管理员权限", value: "L4" },
  { label: "临时人员", value: "L5" }
];
onMounted(() => {
  console.log(route.query);
  getgetApplicationNameList();
  title = route.query.title ? route.query.title : "新增";
  if (route.query && route.query.title == "修改") {
    getgetPermissionsById(route.query.id);
    form.value.id = route.query.id;
  }
});
//菜单
const cropper = data => {
  form.value.menuId = data.checName;
  form.value.menuName = data.checName;
};
//保存父级
const onSearch = async () => {
  if (form.value.id && form.value.id != "") {
    form.value.id = form.value.id.toString();
  }
  let res = await savePermissions(form.value);
  if (res.code == 200) {
    form.value.id = res.data;
    ElMessage({
      message: res.msg,
      type: "success"
    });
  } else {
    ElMessage({
      message: res.msg,
      type: "error"
    });
  }
};
//保存子集同接口
const submitSon = async () => {
  if (formChild.value.id && formChild.value.id != "") {
    formChild.value.id = formChild.value.id.toString();
  }
  let res = await savePermissions(formChild.value);
  if (res.code == 200) {
    getgetPermissionsById(form.value.id);
    formVisible.value = false;
    ElMessage({
      message: res.msg,
      type: "success"
    });
  } else {
    ElMessage({
      message: res.msg,
      type: "error"
    });
  }
};
//取消
const resetForm = row => {};
//选择菜单
const selectHandle = () => {
  treeInfoRef.value.dialogTree = true;
};
//初始化
const getgetPermissionsById = async id => {
  let res = await getPermissionsById({ id: id });
  if (res.code == 200) {
    form.value = { ...form.value, ...res.data };
    console.log(form.value);
  }
};
//获取应用系统
const getgetApplicationNameList = async () => {
  let res = await getApplicationNameList();
  if (res.code == 200) {
    roleOptions.value = res.data;
  }
};
//新增和修改子集
const openDialog = async (flag = "新增", row = {}) => {
  if (form.value.id && form.value.id != "") {
    form.value.id = form.value.id.toString();
  }
  let res = await savePermissions(form.value);
  if (res.code == 200) {
    form.value.id = res.data.toString();
    formChild.value.parentCode = form.value.id;
    if (flag == "新增") {
      formChild.value.systemName = form.value.systemName;
      formChild.value.systemCode = form.value.systemCode;
      formChild.value.powerType = form.value.powerType;
      formChild.value.menuId = form.value.menuId;
      formChild.value.menuName = form.value.menuName;
    } else {
      formChild.value = { ...formChild.value, ...row };
    }
    formVisible.value = true;
  } else {
    ElMessage({
      message: res.msg,
      type: "error"
    });
    return;
  }
};
//删除子集
const handleDelete = row => {};
//是否有效
const onChange = () => {};
//取消添加子集
const closeDialog = () => {
  formVisible.value = false;
};
const getsystem = () => {
  let i = roleOptions.value.findIndex(
    item => item.applicationCode == form.value.systemCode
  );
  if (i != -1) {
    form.value.systemName = roleOptions.value[i].applicationName;
  }
};
</script>
<template>
  <div class="main">
    <el-form
      ref="formRef"
      :inline="false"
      :model="form"
      :label-width="250"
      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
    >
      <h1 style="margin: 10px 0 20px">{{ title }}功能权限</h1>
      <el-form-item label="权限代码：" prop="taskCode">
        <el-input
          v-model="form.taskCode"
          placeholder="请输入权限代码"
          clearable
          class="!w-[360px]"
        />
      </el-form-item>
      <el-form-item label="权限名称：" prop="taskCname">
        <el-input
          v-model="form.taskCname"
          placeholder="请输入权限名称"
          clearable
          class="!w-[360px]"
        />
      </el-form-item>
      <el-form-item label="应用系统：" prop="systemCode">
        <el-select
          v-model="form.systemCode"
          placeholder="请选择"
          clearable
          class="!w-[360px]"
          @change="getsystem"
        >
          <el-option
            v-for="(item, index) in roleOptions"
            :key="index"
            :value="item.applicationCode"
            :label="item.applicationName"
          >
            {{ item.applicationName }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择菜单：" prop="menuName">
        <el-input
          v-model="form.menuName"
          placeholder="请选择选择菜单"
          clearable
          disabled
          class="!w-[360px]"
        />
        <el-button type="primary" @click="selectHandle">选择</el-button>
      </el-form-item>
      <el-form-item label="权限类型：" prop="powerType">
        <el-select
          v-model="form.powerType"
          placeholder="请选择"
          clearable
          class="!w-[360px]"
        >
          <el-option
            v-for="(item, index) in roleOptions2"
            :key="index"
            :value="item.value"
            :label="item.label"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="权限描述：" prop="remark">
        <el-input
          type="textarea"
          v-model="form.remark"
          placeholder="请选择选择菜单"
          clearable
          class="!w-[360px]"
        />
      </el-form-item>

      <el-form-item label="添加子集：" prop="childSysTasks">
        <el-button
          type="primary"
          :loading="loading"
          @click="openDialog('新增')"
        >
          添加
        </el-button>
      </el-form-item>
      <el-table
        :data="form.childSysTasks"
        style="width: 90%; padding: 20px"
        :header-cell-style="{
          background: 'var(--el-fill-color-light)',
          color: 'var(--el-text-color-primary)'
        }"
      >
        <el-table-column prop="taskCode" label="权限名称" />
        <el-table-column prop="validStatus" label="是否有效">
          <template #default="{ row }">
            <el-switch
              v-model="row.validStatus"
              class="ml-2"
              active-value="{1}"
              inactive-value="{0}"
              active-text="已启用"
              inactive-text="已停用"
              inline-prompt
              @change="onChange"
            />
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column fixed="right" label="操作" width="160">
          <template #default="{ row }">
            <el-button
              class="reset-margin"
              link
              type="primary"
              :icon="useRenderIcon(EditPen)"
              @click="openDialog('修改', row)"
            >
              修改
            </el-button>
            <el-popconfirm
              :title="`是否确认删除权限名称为${row.taskCname}的这条数据?`"
              @confirm="handleDelete(row)"
            >
              <template #reference>
                <el-button
                  class="reset-margin"
                  link
                  type="primary"
                  :icon="useRenderIcon(Delete)"
                >
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-form-item>
        <el-button type="primary" :loading="loading" @click="onSearch">
          提交
        </el-button>
        <el-button @click="resetForm(formRef)"> 取消 </el-button>
      </el-form-item>
    </el-form>
    <el-dialog
      v-model="formVisible"
      :title="formTitle"
      :width="680"
      draggable
      :before-close="closeDialog"
    >
      <div>
        <el-form
          ref="formChildRef"
          :inline="false"
          :model="formChild"
          :label-width="200"
        >
          <el-form-item label="权限代码：" prop="taskCode">
            <el-input
              v-model="formChild.taskCode"
              placeholder="请输入权限代码"
              clearable
              class="!w-[360px]"
            />
          </el-form-item>
          <el-form-item label="权限名称：" prop="taskCname">
            <el-input
              v-model="formChild.taskCname"
              placeholder="请输入权限名称"
              clearable
              class="!w-[360px]"
            />
          </el-form-item>
          <el-form-item label="应用系统：" prop="systemName">
            <el-input
              v-model="formChild.systemName"
              disabled
              clearable
              class="!w-[360px]"
            />
          </el-form-item>
          <el-form-item label="选择菜单：" prop="menuName">
            <el-input
              v-model="formChild.menuName"
              placeholder="请选择选择菜单"
              clearable
              disabled
              class="!w-[360px]"
            />
            <el-button type="primary" @click="selectHandle">选择</el-button>
          </el-form-item>
          <el-form-item label="权限类型：" prop="powerType">
            <el-select
              v-model="formChild.powerType"
              placeholder="请选择"
              clearable
              disabled
              class="!w-[360px]"
            >
              <el-option
                v-for="(item, index) in roleOptions2"
                :key="index"
                :value="item.value"
                :label="item.label"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="权限描述：" prop="remark">
            <el-input
              type="textarea"
              v-model="formChild.remark"
              placeholder="权限描述"
              clearable
              class="!w-[360px]"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :loading="loading" @click="submitSon">
              提交
            </el-button>
            <el-button @click="closeDialog()"> 取消 </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <TreeList ref="treeInfoRef" @cropper="cropper"></TreeList>
  </div>
</template>
<style lang="scss" scoped></style>
